<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JCompare</title>
    <!--    gqgrid的css-->
    <link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css">
    <!--    jquery-ui的css-->
    <link rel="stylesheet" type="text/css" href="../css/jquery-ui.min.css">
    <!--jquery的js-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <!--jquery-ui的js-->
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <!--grid本地化的js-->
    <script type="text/javascript" src="../js/jqgrid/grid.locale-en.js"></script>
    <!--jqGrid的js-->
    <script type="text/javascript" src="../js/jqgrid/jquery.jqGrid.js"></script>

</head>
<body>
<table id="list"></table>
</body>
</html>

<script type="text/javascript">
    $("#list").jqGrid({
        url: 'localhost:8888/test/hello',//请求数据的地址
        datatype: "json",
        colNames: ['Id', '姓名', '年龄'],
        //jqgrid主要通过下面的索引信息与后台传过来的值对应
        colModel: [
            {name: 'id', index: 'id', width: 55},
            {name: 'stuName', index: 'stuName', width: 90},
            {name: 'age', index: 'stuSex', width: 100}
        ],
        caption: "我是jqgrid的标题",
    });
</script>
